<template>
	<view class="log-list">
		<view class="log-item" v-for="(item) in dataList" :key="item.id" @click="handleItemClick(item)">
			<view class="lesson-title">
				<view class="lesson-title-title">上课记录</view>
				<text class="lesson-title-time">{{ item.lessontime }}</text>
			</view>
			<view class="lesson-consume">
				消耗课时：<text class="lesson-consume-val">{{ item.consume }}</text>
			</view>
			<view class="lesson-teacher">
				上课老师：<text class="lesson-teacher-val">{{ item.teacher_name }}</text>
			</view>
			<view class="lesson-detail">查看详情</view>
		</view>
		<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
	</view>
</template>
<script>
	import { getLessonLogList, getLessonLogDetail }  from "@/http/lessonLog.js"
	export default {
		data() {
			return {
				dataList: [],
				loadMoreText: "加载中...",
				showLoadMore: false,
				page: {
					pageIndex: 1,
					pageSize: 10,
				},
				total: 0,
			}
		},
		onLoad() {
			this.initData();
		},
		onUnload() {
			this.loadMoreText = "加载更多",
			this.showLoadMore = false;
		},
		onReachBottom() {
			console.log("onReachBottom");
			if (this.dataList.length >= this.total) {
				this.loadMoreText = "没有更多数据了!"
				return;
			}
			this.showLoadMore = true;
			++this.page.pageIndex;
			this.initData();
		},
		onPullDownRefresh() {
			console.log('onPullDownRefresh');
			this.page.pageIndex = 1;
			this.dataList.splice(0, this.dataList.length);
			this.initData();
		},
		methods: {
			initData() {
				getLessonLogList(this.page).then(({ list = [], total = 0}) => {
					this.dataList.push(...list);
					this.total = total;
				}).catch((err) => {
					console.warn(err);
				}).finally(() => {
					this.showLoadMore = false;
					uni.stopPullDownRefresh();
				});
			},
			handleItemClick(e) {
				uni.navigateTo({
					url: '/pages/haihong/lessonLog/detail?id=' + e.id
				});
			},
		}
	}
</script>

<style>
	.log-list {
		
	}
	.log-item {
		background-color: white;
		padding: 10px 10px 0;
	}
	.log-item:nth-child(n + 2) {
		margin-top: 15px;
	}
	.lesson-title {
		display: flex;
	}
	.lesson-title-title {
		font-size: 15px;
		position: relative;
		padding-left: 10px;
		flex: 1;
	}
	.lesson-title-title::before {
		content: ' ';
		display: inline-block;
		width: 2px;
		height: 14px;
		position: absolute;
		left: 0;
		top: 50%;
		background-color: orangered;
		transform: translateY(-50%);
	}
	.lesson-title-time {
		font-size: 12px;
		color: darkgray;
	}
	.lesson-consume, .lesson-teacher {
		margin-top: 10px;
		font-size: 14px;
		color: darkgray;
	}
	.lesson-teacher {
		margin-top: 2px;
	}
	.lesson-consume-val, .lesson-teacher-val {
		color: #333;
	}
	.lesson-detail {
		margin-top: 15px;
		font-size: 14px;
		color: darkgray;
		text-align: center;
		border-top: 1px solid lightgray;
		line-height: 40px;
		cursor: pointer;
	}
</style>
